<template>
  <div>
    <a-locale-provider :locale="localItem">
      <a-layout>
        <a-layout-header>
          <orhon-header :value="list" />
        </a-layout-header>
        <a-layout>
          <a-layout-content>
            <nuxt />
          </a-layout-content>
          <a-layout-sider style="width:350px;flex:0px 0px 350px;min-width:350px">
            <orhon-silder />
          </a-layout-sider>
        </a-layout>
        <a-layout-footer>Footer</a-layout-footer>
      </a-layout>
    </a-locale-provider>
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";
import { Getter, State, namespace } from "vuex-class";
import OrhonHeader from "~/components/HomePage/Header.vue";
import OrhonSilder from "~/components/HomePage/Silder.vue";
import Static from "../models/StaticData/Layout";
import { Header } from "../models/HomePage";
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
import en_GB from "ant-design-vue/lib/locale-provider/en_GB";

const someModule = namespace("i18n");
@Component({
  components: {
    OrhonHeader,
    OrhonSilder
  },
  middleware: ["authenticated"]
})
export default class Default extends Vue {
  @someModule.Getter("get") getGetters;
  @someModule.Mutation("add") setAdd;
  list: Header[] = Static.List;

  Formatter(value: Object): Object {
    let local = this.getGetters.value;
    switch (local) {
      case "zhCN":
        local = zhCN;
        break;
      case "en_GB":
        local = en_GB;
        break;
    }
    return local;
  }

  get localItem(): Object {
    const local = this.Formatter(this.getGetters.value);
    return local;
  }
}
</script>
<style lang="less" scoped>
@color: white;
@background: #f8f8f8;
.ant-layout-header {
  background: @color;
}

.ant-layout-sider {
  background: @background;
}

.ant-layout-footer {
  background: @color;
}

.ant-layout {
  background: @background;
  max-width: 1500px;
  margin: 0px auto;
}

.ant-layout-content {
  padding: 20px;
  min-width: 900px;
  min-height: calc(100vh - 133px);
}
</style>
